<!--
  @author:  long
  @date:    2023/3/7
  @file:    客户联系人
  @require:
-->
<template>
  <div>
    <div class="flex items-center justify-between">
      <TitleName title="订单记录" icon="i-carbon-bookmark-filled"></TitleName>
      <div>
        <el-button type="primary" icon="Plus" @click="addOrder">添加</el-button>
        <el-button type="primary" icon="UploadFilled" plain>导出</el-button>
        <!--        <el-button type="primary" icon="Delete" size="small" @click="handleDel"-->
        <!--          >删除</el-button-->
        <!--        >-->
      </div>
    </div>
    <el-table
      class="mt-2"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="number" label="订单编号" width="200">
        <template #default="scope">
          <el-link
            type="primary"
            :underline="false"
            @click="
              goTo('/sales/indent/salesOrderDetails', {
                salesOrderId: scope.row.id
              })
            "
            >{{ scope.row.number }}</el-link
          >
        </template></el-table-column
      >
      <el-table-column prop="title" label="订单标题" width="230">
      </el-table-column>
      <el-table-column prop="price" label="订单总金额" width="130">
        <template #default="scope">
          <span v-if="scope.row.price">¥{{ scope.row.price }}</span
          ><span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column prop="approvalStatus" label="审批状态" width="130">
        <template #default="scope">
          {{ scope.row.approvalStatus }}
        </template>
      </el-table-column>

      <el-table-column prop="repaymentPrice" label="已回款金额" width="130">
        <template #default="scope">
          <span v-if="scope.row.repaymentPrice"
            >¥{{ scope.row.repaymentPrice }}</span
          ><span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="invoicePrice" label="已开票金额" width="130">
        <template #default="scope">
          <span v-if="scope.row.invoicePrice"
            >¥{{ scope.row.invoicePrice }}</span
          ><span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTimes"
        label="创建时间"
        width="150"
      ></el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="ContactsOrderList">
import { getCurrentInstance } from 'vue'
import { delContact } from '@/api/customerManage/contactList'
import { getOrderList } from '@/api/salesManage/contractManage'
import {
  order_status //订单状态
} from '@/hooks/dict/order'
const router = useRouter()

const { proxy } = getCurrentInstance()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  selectionData: []
})
const { queryParams, tableData, total, selectionData } = toRefs(data)

const props = defineProps({
  details: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

function goTo(url, data) {
  router.push({ path: url, query: data })
}

/**
 * 添加联系人
 */
function addOrder() {
  let obj = {
    customerId: router.currentRoute.value.query.contactsId,
    customerName: props.details.contactName,
    customerType: 'cusLink'
  }
  router.push({
    path: '/sales/indent/salesOrderForm',
    query: { salesOrderData: JSON.stringify(obj) }
  })
}

//如果是首要联系人 复选框禁用
function selectable(row, rowIndex) {
  //索引是从0开始，条件1是指只有第2行数据不被禁用
  if (row.isChiefly == '1') {
    return false //不禁用
  } else {
    return true //禁用
  }
}

/**
 * 获取列表数据
 */
function getList() {
  queryParams.value.customerId = router.currentRoute.value.query.contactsId

  getOrderList(queryParams.value).then(res => {
    tableData.value = res.rows
    total.value = res.total
  })
}

getList()

/**
 * 删除方法
 */
function handleDel() {
  if (!selectionData.value.length) {
    proxy.$modal.msgWarning('请选择要删除的数据')
    return
  }
  proxy
    .$confirm('确认删除选中记录吗？', '提示', {
      type: 'warning'
    })
    .then(() => {
      let ids = selectionData.value
        .map(item => {
          return item.id
        })
        .join(',')
      const params = {
        ids
      }
      delContact(params).then(res => {
        proxy.$modal.msgSuccess(res.msg)
        getList()
      })
    })
}
</script>

<style scoped lang="scss"></style>
